<template>

  <el-row class="home" :gutter="20">
    <el-col :span="12" style="margin-top: 20px;">
      <el-card style="height: 360px">
        <div style="font-weight: 600;">建筑碳减排数据</div>
        <div ref="userEchart" style="height: 280px;width: 700px;margin-left: -100px ;"></div>
      </el-card>
    </el-col>

    <el-col :span="12" style="margin-top: 20px;">
      <el-card style="height: 360px;">
        <div style="font-weight: 600;">园区建筑地图</div>
        <img src="../../assets/map.jpg" style="height: 280px;width: 550px;margin-top: 15px;margin-left: 15px;" >
        <div style="margin-left: 190px; position: absolute;z-index: 1;margin-top: -100px;color: grey;font-weight: 600;background-color: white;border-radius: 25%;padding: 5px;">仓储车间</div>
        <div style="margin-left: 130px; position: absolute;z-index: 1;margin-top: -150px;color: grey;font-weight: 600;background-color: white;border-radius: 25%;padding: 5px;">运输车间</div>
        <div style="margin-left: 40px; position: absolute;z-index: 1;margin-top: -200px;color:grey;font-weight: 600;background-color: white;border-radius: 25%;padding: 5px;">包装车间</div>
        <div style="margin-left: 280px; position: absolute;z-index: 1;margin-top: -190px;color: grey;font-weight: 600;background-color: white;border-radius: 25%;padding: 5px;">实验楼</div>
        <div style="margin-left: 200px; position: absolute;z-index: 1;margin-top: -230px;color: grey;font-weight: 600;background-color: white;border-radius: 25%;padding: 5px;">办公楼</div>
        <div style="margin-left: 340px; position: absolute;z-index: 1;margin-top: -130px;color: grey;font-weight: 600;background-color: white;border-radius: 25%;padding: 5px;">设备维护区域</div>
        <div style="margin-left: 360px; position: absolute;z-index: 1;margin-top: -220px;color: grey;font-weight: 600;background-color: white;border-radius: 25%;padding: 5px;">排放控制设备</div>
        <div style="margin-left: 480px; position: absolute;z-index: 1;margin-top: -180px;color: grey;font-weight: 600;background-color: white;border-radius: 25%;padding: 5px;">安全设备</div>
      </img>
      </el-card>
    </el-col>

  </el-row>
  <el-row class="home" :gutter="20">
    <el-col :span="15" style="margin-top: 20px;">
      <el-card style="height: 360px;display: flex;flex-direction: column;">
        <el-row :gutter="20">
        
          <el-col :span="10">
            <div style="font-weight: 600;">行业建筑碳排放对比图</div>
            <div ref="echart" style="height: 300px;width: 350px;margin-left: -20px;"></div>

          </el-col>
    
          <el-col :span="10">
            <div style="font-weight: 600;">公司建筑碳排放对比图</div>
            <div ref="echart1" style="height: 300px;width: 500px;margin-left: -60px;"></div>


          </el-col>
        </el-row>
      </el-card>
    </el-col>

    <el-col :span="9" style="margin-top: 20px;">
      <el-card style="height: 360px">
        <div style="font-weight: 600;">建筑用电分类分项</div>
        <div ref="videoEchart" style="height: 280px"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>

import {
  onMounted,
  ref,
  getCurrentInstance,
  reactive,
} from "vue";
// import axios from "axios";
import * as echarts from "echarts";

// tableData使用let定义，因为后续会对其进行赋值, tableData is defined using let because it will be assigned later
let tableData = ref([]); // 双向绑定，使用ref包裹数组，实现响应式数据, Two-way binding, use ref to wrap the array to achieve responsive data
let countData = ref({});
// 今日购买，本月购买，总购买 Today's purchases, Monthly purchases, Total purchases
const tableLable = {
  name: "Brand",
  todayPurchase: "Today's purchases",
  monthlyPurchase: "Monthly purchases",
  totalPurchase: "Total purchases",
};

// proxy是vue3.0提供的一个全局对象，可以通过getCurrentInstance()获取到当前实例，
// 再通过proxy.$api获取到api-fox模拟的接口数据
const { proxy } = getCurrentInstance();
const getTableList = async () => {
  // 使用api-fox模拟请求数据
  //   await axios
  //     .get(
  //       "https://mock.apifox.com/m1/4216854-0-default/api/home/getTableData"
  //     )
  //     .then((res) => {
  //       console.log(res);
  //       if (res.data.code === 200) {
  //         tableData.value = res.data.data;
  //       }
  //     });

  // let res = await proxy.$api.getTableData();
  // tableData.value = res;
  tableData.value = [
    {
      name: "oppo",
      todayPurchase: 500,
      monthlyPurchase: 3500,
      totalPurchase: 22000,
    },
    {
      name: "vivo",
      todayPurchase: 300,
      monthlyPurchase: 2200,
      totalPurchase: 24000,
    },
    {
      name: "apple",
      todayPurchase: 800,
      monthlyPurchase: 4500,
      totalPurchase: 65000,
    },
    {
      name: "xiaomi",
      todayPurchase: 1200,
      monthlyPurchase: 6500,
      totalPurchase: 45000,
    },
    {
      name: "samsung",
      todayPurchase: 300,
      monthlyPurchase: 2000,
      totalPurchase: 34000,
    },
    {
      name: "hauwei",
      todayPurchase: 1050,
      monthlyPurchase: 8000,
      totalPurchase: 102000,
    },
  ]
};
// 获取首页count统计数据
const getCountData = async () => {
  // let res = await proxy.$api.getCountData();
  // countData.value = res;
  countData.value = [{ "name": "Today paid order", "value": 1234, "icon": "success-filled", "color": "#2ec7c9" }, { "name": "Today collection order", "value": 210, "icon": "star-filled", "color": "#ffb980" }, { "name": "Today unpaid order", "value": 1234, "icon": "goods-filled", "color": "#5ab1ef" }, { "name": "Monthly paid order", "value": 1234, "icon": "success-filled", "color": "#2ec7c9" }, { "name": "Monthly collection order", "value": 210, "icon": "star-filled", "color": "#ffb980" }, { "name": "Monthly unpaid order", "value": 1234, "icon": "goods-filled", "color": "#5ab1ef" }]
};

// 关于echarts的渲染部分，可以参考echarts官网的文档
let xOptions = reactive({
  // 图例文字颜色
  textStyle: {
    color: "#333",
  },
  grid: {
    left: "20%",
  },
  // 提示框
  tooltip: {
    trigger: "axis",
  },
  xAxis: {
    type: "category", // 类目轴
    data: [],
    axisLine: {
      lineStyle: {
        color: "#17b3a3",
      },
    },
    axisLabel: {
      interval: 0,
      color: "#333",
    },
  },
  yAxis: [
    {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#17b3a3",
        },
      },
    },
  ],
  color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
  series: [],
});
let pieOptions = reactive({
  tooltip: {
    trigger: "item",
  },
  color: [
    "#0f78f4",
    "#dd536b",
    "#9462e5",
    "#a6a6a6",
    "#e1bb22",
    "#39c362",
    "#3ed1cf",
  ],
  series: [],
});
// 定义响应式数据 !!
let orderData = reactive({
  xData: [],
  series: [],
});
let userData = reactive({
  xData: [],
  series: [],
});
let videoData = reactive({
  series: [],
});


// 关于echartss的渲染部分，可以参考echarts官网的文档
let xOptionss = reactive({
  // 图例文字颜色
  textStyle: {
    color: "#333",
  },
  grid: {
    left: "20%",
  },
  // 提示框
  tooltip: {
    trigger: "axis",
  },
  xAxis: {
    type: "category", // 类目轴
    data: [],
    axisLine: {
      lineStyle: {
        color: "#17b3a3",
      },
    },
    axisLabel: {
      interval: 0,
      color: "#333",
    },
  },
  yAxis: [
    {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#17b3a3",
        },
      },
    },
  ],
  color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
  seriess: [],
});
let pieOptionss = reactive({
  tooltip: {
    trigger: "item",
  },
  color: [
    "#0f78f4",
    "#dd536b",
    "#9462e5",
    "#a6a6a6",
    "#e1bb22",
    "#39c362",
    "#3ed1cf",
  ],
  seriess: [],
});


// 获取echarts数据
const getEchartData = async () => {
  let result = await proxy.$api.getEchartData();
  // console.log(result);
  // let { orderData, userData, videoData } = result; // 解构赋值后不具有响应式，因为result是一个普通对象
  let res = result.orderData;
  let userRes = result.userData;
  let videoRes = result.videoData;
  orderData.xData = res.date;
  const keyArray = Object.keys(res.data[0]);
  const series = [];
  keyArray.forEach((key) => {
    series.push({
      name: key,
      data: res.data.map((item) => item[key]),
      type: "line",
    });
  });
  orderData.series = series;
  xOptions.xAxis.data = orderData.xData;
  xOptions.series = orderData.series;
  xOptionss.seriess = orderData.series;
  // 渲染echarts: orderData
  let hEcharts = echarts.init(proxy.$refs["echart"]); // 获取dom节点 ref="echart"
  hEcharts.setOption(xOptions);



  keyArray.forEach((key) => {
    series.push({
      name: key,
      data: res.data.map((item) => item[key]),
      type: "line",
    });
  });
  orderData.series = series;
  xOptions.xAxis.data = orderData.xData;
  xOptions.series = orderData.series;
  xOptionss.seriess = orderData.series;
  // 渲染echarts: orderData
  let hhEcharts = echarts.init(proxy.$refs["echart1"]); // 获取dom节点 ref="echart"
  hhEcharts.setOption(xOptions);





  // 渲染柱状图: userData
  userData.xData = userRes.map((item) => item.date);
  userData.series = [
    {
      name: "New users",
      data: userRes.map((item) => item.new),
      type: "bar",
    },
    {
      name: "Active users",
      data: userRes.map((item) => item.active),
      type: "bar",
    },
  ];
  xOptions.xAxis.data = userData.xData;
  xOptions.series = userData.series;
  let userEcharts = echarts.init(proxy.$refs["userEchart"]); // 获取dom节点 ref="userEchart"
  userEcharts.setOption(xOptions);




  // 渲染饼图: videoData
  videoData.series = [
    {
      data: videoRes,
      type: "pie",
    },
  ];
  pieOptions.series = videoData.series;
  let videoEcharts = echarts.init(proxy.$refs["videoEchart"]); // 获取dom节点 ref="videoEchart"
  videoEcharts.setOption(pieOptions);
};

const getEchartData2 = async () => {
  // 渲染曲线图
  orderData.xData = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
  const series = [
    {
      name: "公司",
      data: [30.75, 28.3, 25.3, 30.5, 31.25, 29.59, 29.41, 29, 30.28, 28.66, 30, 26.83],
      type: "line",
    },
    {
      name: "行业",
      data: [25.34, 33.71, 21.00, 35.28, 26.81, 25.19, 32.79, 37.99, 28.31, 30.18, 37.57, 20.41],
      type: "line",
    },
    {
      name: "标杆",
      data: [27.81, 25.77, 27.39, 26.91, 29.68, 33.16, 26.70, 31.42, 25.45, 25.34, 33.71, 24.95],
      type: "line",
    }
  ];
  orderData.series = series;
  xOptions.xAxis.data = orderData.xData;
  xOptions.series = orderData.series;
  // 渲染echarts: orderData
  let hEcharts = echarts.init(proxy.$refs["echart"]); // 获取曲线图dom节点 ref="echart"
  hEcharts.setOption(xOptions);

  // 渲染曲线图2
  orderData.xData = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
  const seriess = [
    {
      name: "运输车间",
      data: [4.28, 3.98, 6.01, 3.28, 5.40, 7.11, 3.20, 4.88, 2.90, 5.41, 7.73, 4.55],
      type: "line",
    },
    {
      name: "包装车间",
      data: [2.31, 1.95, 3.15, 3.09, 2.70, 2.22, 2.36, 3.97,4.52,3.88,4.21,1.99],
      type: "line",
    },
    {
      name: "储存仓库",
      data: [5.76,6.78,5.32,4.97,6.23,6.80,2.51,3.88,7.64,5.72,6.00,3.95],
      type: "line",
    },
    {
      name: "实验室",
      data: [0.78,1.53,2.01,1.69,1.35,0.13,0.65,0.78,0.39,1.21,1.14,0.98],
      type: "line",
    },
    {
      name: "办公楼",
      data: [4.00,1.69,3.29,3.97,4.06,2.85,3.82,2.77,3.94,3.73,4.92,2.49],
      type: "line",
    },
    {
      name: "设备维护区域",
      data: [2.37,2.03,1.85,1.55,2.43,3.04,3.15,2.11,1.76,1.89,2.16,1.03],
      type: "line",
    },
    {
      name: "排放控制设备",
      data: [2.32,1.60,2.00,3.01,2.16,2.73,2.58,2.70,1.31,1.79,2.16,2.36],
      type: "line",
    },
    {
      name: "安全设施",
      data: [1.04,1.26,2.34,2.09,1.62,0.89,2.26,1.19,0.96,0.45,1.32,0.36],
      type: "line",
    }
  ];
  orderData.series = seriess;
  xOptions.xAxis.data = orderData.xData;
  xOptions.series = orderData.series;
  // 渲染echarts: orderData
  let hhEcharts = echarts.init(proxy.$refs["echart1"]); // 获取曲线图dom节点 ref="echart"
  hhEcharts.setOption(xOptions);


  // 渲染柱状图: userData
  userData.xData = ["运输车间", "包装车间", "储存仓库", "实验室", "办公楼", "设备维护区域", "安全设备"];
  userData.series = [
    {
      name: "5月数据",
      data: [5.4, 2.7, 6.23, 1.35, 4.16, 2.43, 2.16, 1.62],
      type: "bar",
    },
    {
      name: "初始数据",
      data: [6.9, 3.2, 7.1, 2.22, 5.74, 2.97, 2.85, 2.00],
      type: "bar",
    },
  ];
  xOptions.xAxis.data = userData.xData;
  xOptions.series = userData.series;
  let userEcharts = echarts.init(proxy.$refs["userEchart"]); // 获取柱状图dom节点 ref="userEchart"
  userEcharts.setOption(xOptions);

  // 渲染饼图: videoData
  pieOptions.series = [
    {
      data: [{
        "name": "空调和暖气设备33%",
        "value": 33
      }, {
        "name": "安全系统24%",
        "value": 24
      }, {
        "name": "照明系统22%",
        "value": 22
      }, {
        "name": "电梯，扶梯12%",
        "value": 12
      }, {
        "name": "电力插座9%",
        "value": 9
      }],
      type: "pie",
    },
  ];
  let videoEcharts = echarts.init(proxy.$refs["videoEchart"]); // 获取饼状图dom节点 ref="videoEchart"
  videoEcharts.setOption(pieOptions);
};

onMounted(() => {
  getTableList();
  getCountData();
  getEchartData2();
});
</script>
<!-- <script setup> -->

// import {
// onMounted,
// } from "vue";
// // import axios from "axios";
// import * as echarts from "echarts";

// xOptions.xAxis.data = userData.xData;
// xOptions.series = userData.series;
// let userEcharts = echarts.init(proxy.$refs["userEchart"]); // 获取柱状图dom节点 ref="userEchart"
// userEcharts.setOption(xOptions);

// // 获取echarts数据
// const getEchartData = async () => {
// let result = await proxy.$api.getEchartData();
// // console.log(result);
// // let { orderData, userData, videoData } = result; // 解构赋值后不具有响应式，因为result是一个普通对象
// let res = result.orderData;
// let userRes = result.userData;
// let videoRes = result.videoData;
// orderData.xData = res.date;
// const keyArray = Object.keys(res.data[0]);
// const series = [];
// keyArray.forEach((key) => {
// series.push({
// name: key,
// data: res.data.map((item) => item[key]),
// type: "line",
// });
// });
// orderData.series = series;
// xOptions.xAxis.data = orderData.xData;
// xOptions.series = orderData.series;
// // 渲染echarts: orderData
// let hEcharts = echarts.init(proxy.$refs["echart"]); // 获取dom节点 ref="echart"
// hEcharts.setOption(xOptions);

// // 渲染柱状图: userData
// userData.xData = userRes.map((item) => item.date);
// userData.series = [
// {
// name: "New users",
// data: userRes.map((item) => item.new),
// type: "bar",
// },
// {
// name: "Active users",
// data: userRes.map((item) => item.active),
// type: "bar",
// },
// ];
// xOptions.xAxis.data = userData.xData;
// xOptions.series = userData.series;
// let userEcharts = echarts.init(proxy.$refs["userEchart"]); // 获取dom节点 ref="userEchart"
// userEcharts.setOption(xOptions);

// // 渲染饼图: videoData
// videoData.series = [
// {
// data: videoRes,
// type: "pie",
// },
// ];
// pieOptions.series = videoData.series;
// let videoEcharts = echarts.init(proxy.$refs["videoEchart"]); // 获取dom节点 ref="videoEchart"
// videoEcharts.setOption(pieOptions);
// };

// const getEchartData2 = async () => {
// // 渲染曲线图
// orderData.xData = ["20240301", "20240302", "20240303", "20240304", "20240305", "20240306", "20240307"];
// const series = [
// {
// name: "Apple",
// data: [2338, 2345, 2346, 2350, 2351, 2357],
// type: "line",
// },
// {
// name: "Xiaomi",
// data: [2338, 2345, 2346, 2350, 2351, 2357],
// type: "line",
// },
// {
// name: "Huawei",
// data: [2438, 2545, 2646, 2750, 2851, 2234],
// type: "line",
// },
// {
// name: "Oppo",
// data: [2368, 2345, 2346, 2350, 2351, 2353],
// type: "line",
// },
// {
// name: "Vivo",
// data: [2638, 2745, 2846, 2950, 2151, 2223],
// type: "line",
// },
// {
// name: "OnePlus",
// data: [2348, 2545, 2646, 2750, 2851, 3211],
// type: "line",
// }
// ];
// orderData.series = series;
// xOptions.xAxis.data = orderData.xData;
// xOptions.series = orderData.series;
// // 渲染echarts: orderData
// let hEcharts = echarts.init(proxy.$refs["echart"]); // 获取曲线图dom节点 ref="echart"
// hEcharts.setOption(xOptions);

// // 渲染柱状图: userData
// userData.xData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
// userData.series = [
// {
// name: "New users",
// data: [5, 10, 20, 30, 40, 60, 80],
// type: "bar",
// },
// {
// name: "Active users",
// data: [100, 250, 350, 450, 605, 805, 395],
// type: "bar",
// },
// ];
// xOptions.xAxis.data = userData.xData;
// xOptions.series = userData.series;
// let userEcharts = echarts.init(proxy.$refs["userEchart"]); // 获取柱状图dom节点 ref="userEchart"
// userEcharts.setOption(xOptions);

// // 渲染饼图: videoData
// pieOptions.series = [
// {
// data: [{
// "name": "Xiaomi",
// "value": 2999
// }, {
// "name": "Apple",
// "value": 5999
// }, {
// "name": "Vivo",
// "value": 1500
// }, {
// "name": "Oppo",
// "value": 1999
// }, {
// "name": "OnePlus",
// "value": 2200
// }, {
// "name": "Huawei",
// "value": 4500
// }],
// type: "pie",
// },
// ];
// let videoEcharts = echarts.init(proxy.$refs["videoEchart"]); // 获取饼状图dom节点 ref="videoEchart"
// videoEcharts.setOption(pieOptions);
// };


// onMounted(() => {
// this.getEchartDataC1()
// })

<!-- </script> -->


<style lang="less">
.home {
  .user {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;

    img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      margin-right: 40px;
    }
  }

  .login-info {
    p {
      line-height: 30px;
      font-size: 14px;
      color: #999;

      span {
        color: #666;
        margin-left: 60px;
      }
    }
  }

  .graph {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;


    .el-card {
      width: 48%;
    }
  }
}

.el-table .cell {
  padding: 0 3px;
}
</style>
